<template>
	<view class="voc">
		<view class="paraphrase">{{vocDetail.paraphrase}}</view>
		<view class="voc-phrase">
			<view class="phrase">
				{{vocPhrase[0].phrase}}
			</view>
			<view class="interpretation">
				{{vocPhrase[0].interpretation}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "voc-detail",
		props: ['vocDetail', 'vocPhrase'],
		data() {
			return {

			};
		},
	}
</script>

<style lang="scss">
	.voc {
		height: 100%;
		.paraphrase{
			height: 25px;
			font-size: 20px;
			margin-bottom: 15px;
		}
		.voc-phrase {
			.phrase {
				font-size: 20px;
			}
		}
	}
</style>
